<!--导航栏-->
<div class="row-fluid">
    <div class="navbar no-margin">
        <div class="navbar-inner">
            <ul class="breadcrumb">
                <i class="icon-chevron-left hide-sidebar"><a href='#' title="Hide Sidebar" rel='tooltip'>&nbsp;</a></i>
                <i class="icon-chevron-right show-sidebar" style="display:none;"><a href='#' title="Show Sidebar"
                        rel='tooltip'>&nbsp;</a></i>
                <li>
                    <a href="#/reci">首页</a>
                </li>
                <li class="active">招聘指数</li>
            </ul>
        </div>
    </div>
</div>
<div class="pull-convert-alert"></div>

<style type="text/css">
    .front-arrow {
        position: absolute;
        right: -5px;
        bottom: 0px;
        width: 10px;
        height: 10px;
        border: 1px solid black;
        border-top: none;
        border-right: none;
        transform: rotate(-45deg);
    }

    .back-arrow {
        position: absolute;
        top: 0px;
        left: -5px;
        width: 10px;
        height: 10px;
        border: 1px solid black;
        border-top: none;
        border-right: none;
        transform: rotate(135deg);
    }

    .edge-front {
        position: absolute;
        border-top: 1px solid;
        border-left: 1px solid;
        border-right: 1px solid;
    }

    .edge-back {
        position: absolute;
        border-bottom: 1px solid;
        border-left: 1px solid;
        border-right: 1px solid;
    }

    .drawing-line {
        display: flex;
        position: absolute;
    }

    .drawing-block {
        width: 60px;
        height: 60px;
        border: 1px solid #CCC;
        border-radius: 30px;
        line-height: 60px;
        text-align: center;
        margin: 9px;
        background-color: #4ff181;
    }

    .graph-line {
        display: flex;
    }

    .graph-block {
        width: 60px;
        text-align: center;
        border-bottom: 1px solid #CCC;
        border-right: 1px solid #CCC;
        height: 40px;
        line-height: 40px;
    }

    .target-node {
        background-color: red;
        height: 200px;
        line-height: 20px;
    }

    .source-node {
        background-color: green;
        width: 240px;
        font-size: 12px;
    }

    .words-div {
        text-align: center;
    }

    .word-button {
        background-color: #B8D9FD;
        border-radius: 100px;
        color: black;
        border: 1px solid #B8D9FD;
        width: 7rem;
        font-weight: bolder;
    }

    .nav-rnk {
        width: 20%;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        margin-right: 1.5rem;
        text-align: center;
        font-size: 3rem;
        line-height: 7rem;
        font-weight: bolder;
    }

    .biz-name {
        font-weight: bolder;
        font-size: 2.5rem;
    }
</style>

<div style="padding: 0 10px 10px">
    <div style="text-align: left; font-size: 1.2rem; float: left; width: 50%;">
        <a href="https://docs.qq.com/sheet/DTGNEZVV6TXlDalNJ?tab=BB08J2" target="_blank"><u>整体说明&指标口径</u></a>
    </div>
    <div style="text-align: right;font-size: 1.2rem; float: right;width: 50%;color: red;">数据更新时间：每日10:00后更新昨日数据</div>
    <br />
</div>

<div class="container-fluid">
    <div style="margin: 10px">
        <div class="row">
            <div class="col-sm-12 col-md-12">
                <h3> 搜索排行概览</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-12">
                <ul class="nav nav-pills" role="tablist">
                    <li role="presentation" class="active nav-rnk"><a href="#/star/main/area_words_top">地域热词排行</a></li>
                    <li role="presentation" class="active nav-rnk"><a href="#/star/main/cate_words_top">职类热词排行</a></li>
                </ul>
            </div>
        </div>{{p}}
        <div class="row" style="margin-top: 5rem;">
            <div class="col-sm-5 col-md-5">
                <div class="row">
                    <div class="col-sm-12 col-md-12 words-div">
                        <a href="{{ vm.p.wuba[0] | wordToHref:'wuba' }}" class="btn btn-primary word-button" role="button">{{vm.p.wuba[0]}}</a>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6 col-md-6 words-div">
                        <a href="{{ vm.p.wuba[1] | wordToHref:'wuba' }}" class="btn btn-primary word-button" role="button">{{vm.p.wuba[1]}}</a>
                    </div>
                    <div class="col-sm-6 col-md-6 words-div">
                        <a href="{{ vm.p.wuba[2] | wordToHref:'wuba' }}" class="btn btn-primary word-button" role="button">{{vm.p.wuba[2]}}</a>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-1 col-md-1 words-div">
                        <a href="{{ vm.p.wuba[3] | wordToHref:'wuba' }}" class="btn btn-primary word-button" role="button">{{vm.p.wuba[3]}}</a>
                    </div>
                    <div class="col-sm-10 col-md-10 words-div">
                        <!-- <a href="#" class="btn btn-primary" role="button">普工</a> -->
                    </div>
                    <div class="col-sm-1 col-md-1 words-div">
                        <a href="{{ vm.p.wuba[4] | wordToHref:'wuba' }}" class="btn btn-primary word-button" role="button">{{vm.p.wuba[4]}}</a>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12 col-md-12 words-div">
                        <a href="#/star/main/wuba_words_top" class="biz-name">58搜索热词</a>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-1 col-md-1 words-div">
                        <a href="{{ vm.p.wuba[5] | wordToHref:'wuba' }}" class="btn btn-primary word-button" role="button">{{vm.p.wuba[5]}}</a>
                    </div>
                    <div class="col-sm-10 col-md-10 words-div">
                        <!-- <a href="#" class="btn btn-primary" role="button">普工</a> -->
                    </div>
                    <div class="col-sm-1 col-md-1 words-div">
                        <a href="{{ vm.p.wuba[6] | wordToHref:'wuba' }}" class="btn btn-primary word-button" role="button">{{vm.p.wuba[6]}}</a>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6 col-md-6 words-div">
                        <a href="{{ vm.p.wuba[7] | wordToHref:'wuba' }}" class="btn btn-primary word-button" role="button">{{vm.p.wuba[7]}}</a>
                    </div>
                    <div class="col-sm-6 col-md-6 words-div">
                        <a href="{{ vm.p.wuba[8] | wordToHref:'wuba' }}" class="btn btn-primary word-button" role="button">{{vm.p.wuba[8]}}</a>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12 col-md-12 words-div">
                        <a href="{{ vm.p.wuba[9] | wordToHref:'wuba' }}" class="btn btn-primary word-button" role="button">{{vm.p.wuba[9]}}</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-1 col-md-1"></div>
            <div class="col-sm-5 col-md-5">
                <div class="row">
                    <div class="col-sm-12 col-md-12 words-div">
                        <a href="{{ vm.p.ganji[0] | wordToHref:'ganji' }}" class="btn btn-primary word-button" role="button">{{vm.p.ganji[0]}}</a>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6 col-md-6 words-div">
                        <a href="{{ vm.p.ganji[1] | wordToHref:'ganji' }}" class="btn btn-primary word-button" role="button">{{vm.p.ganji[1]}}</a>
                    </div>
                    <div class="col-sm-6 col-md-6 words-div">
                        <a href="{{ vm.p.ganji[2] | wordToHref:'ganji' }}" class="btn btn-primary word-button" role="button">{{vm.p.ganji[2]}}</a>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-1 col-md-1 words-div">
                        <a href="{{ vm.p.ganji[3] | wordToHref:'ganji' }}" class="btn btn-primary word-button" role="button">{{vm.p.ganji[3]}}</a>
                    </div>
                    <div class="col-sm-10 col-md-10 words-div">
                        <!-- <a href="#" class="btn btn-primary" role="button">普工</a> -->
                    </div>
                    <div class="col-sm-1 col-md-1 words-div">
                        <a href="{{ vm.p.ganji[5] | wordToHref:'ganji' }}" class="btn btn-primary word-button" role="button">{{vm.p.ganji[4]}}</a>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12 col-md-12 words-div">
                        <a href="#/star/main/ganji_words_top" class="biz-name">赶集搜索热词</a>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-1 col-md-1 words-div">
                        <a href="{{ vm.p.ganji[5] | wordToHref:'ganji' }}" class="btn btn-primary word-button" role="button">{{vm.p.ganji[5]}}</a>
                    </div>
                    <div class="col-sm-10 col-md-10 words-div">
                        <!-- <a href="#" class="btn btn-primary" role="button">普工</a> -->
                    </div>
                    <div class="col-sm-1 col-md-1 words-div">
                        <a href="{{ vm.p.ganji[6] | wordToHref:'ganji' }}" class="btn btn-primary word-button" role="button">{{vm.p.ganji[6]}}</a>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6 col-md-6 words-div">
                        <a href="{{ vm.p.ganji[7] | wordToHref:'ganji' }}" class="btn btn-primary word-button" role="button">{{vm.p.ganji[7]}}</a>
                    </div>
                    <div class="col-sm-6 col-md-6 words-div">
                        <a href="{{ vm.p.ganji[8] | wordToHref:'ganji' }}" class="btn btn-primary word-button" role="button">{{vm.p.ganji[8]}}</a>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12 col-md-12 words-div">
                        <a href="{{ vm.p.ganji[9] | wordToHref:'ganji' }}" class="btn btn-primary word-button" role="button">{{vm.p.ganji[9]}}</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-1 col-md-1"></div>
        </div>
    </div>
</div>